﻿@page "/chart/pie-empty-points"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.DropDowns

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the annual product-wise profit analysis of an organisation with empty point functionality in the pie series.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the empty points. The empty point mode can be changed from <code>Drop</code> to <code>Average</code> or <code>Zero</code> using the dropdown list.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the empty points can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/accumulation-chart/empty-points/'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <SfAccumulationChart Title="Annual Product-Wise Profit Analysis" Theme="@Theme">
        <AccumulationChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y}</b>"></AccumulationChartTooltipSettings>

        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>

        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@PieChartPoints" Name="Profit" XName="Product" YName="ProfitPercentage" Type="AccumulationType.Pie">
                <AccumulationChartEmptyPointSettings Mode="@Mode" Fill="#e6e6e6"></AccumulationChartEmptyPointSettings>
                <AccumulationDataLabelSettings Visible="true" Position="AccumulationLabelPosition.Inside"></AccumulationDataLabelSettings>
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
    </SfAccumulationChart>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table title="Properties" style="width: 100%">
                <tr style="height:50px">
                    <td style="width: 50%">
                        Empty Point Mode:
                    </td>
                    <td style="width: 50%">
                        <SfDropDownList TValue="string" Placeholder="Drop" TItem="SelectionTypes" DataSource="@EmptyPointModeData">
                            <DropDownListEvents TValue="string" TItem="SelectionTypes" ValueChange="ChangeEmptyPointMode"></DropDownListEvents>
                            <DropDownListFieldSettings Value="Type"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    private Theme Theme { get; set; }
    private EmptyPointMode Mode { get; set; } = EmptyPointMode.Drop;
    public List<PieData> PieChartPoints { get; set; } = new List<PieData>
    {
        new PieData { Product = "Rice", ProfitPercentage = 80 },
        new PieData { Product = "Wheat", ProfitPercentage = null },
        new PieData { Product = "Oil", ProfitPercentage = 70 },
        new PieData { Product = "Corn", ProfitPercentage = 60 },
        new PieData { Product = "Gram", ProfitPercentage = null },
        new PieData { Product = "Milk", ProfitPercentage = 70 },
        new PieData { Product = "Peas", ProfitPercentage = 80 },
        new PieData { Product = "Fruit", ProfitPercentage = 60 },
        new PieData { Product = "Butter", ProfitPercentage = null }
    };
    public List<SelectionTypes> EmptyPointModeData { get; set; } = new List<SelectionTypes>
    {
        new SelectionTypes() { Type = EmptyPointMode.Drop.ToString() },
        new SelectionTypes() { Type = EmptyPointMode.Average.ToString() },
        new SelectionTypes() { Type = EmptyPointMode.Zero.ToString() }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    private void ChangeEmptyPointMode(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, SelectionTypes> args)
    {
        if (args.Value.ToString().Equals(EmptyPointModeData[1].Type))
        {
            Mode = EmptyPointMode.Average;
        }
        else if (args.Value.ToString().Equals(EmptyPointModeData[2].Type))
        {
            Mode = EmptyPointMode.Zero;
        }
        else
        {
            Mode = EmptyPointMode.Drop;
        }
    }

    public class SelectionTypes
    {
        public string Type { get; set; }
    }

    public class PieData
    {
        public string Product { get; set; }
        public double? ProfitPercentage { get; set; }
    }
}
